<template>
  <div>
    <van-tabbar
      class="tabbar"
      v-model="activeIndex"
      v-if="isTabUrl"
      :active-color="basic.theme || cfg.theme"
      inactive-color="#7F8389"
      :z-index='100'
    >
      <van-tabbar-item
        v-for="(item, index) in tabbar"
        :key="index"
        @click="navClick(item.link,index)"
      >
        <template #icon>
          <span :class="'iconfont ' + item.icon"></span>
        </template>
        <div class="item" :style="{color:activeIndex == index?basic.theme || cfg.theme:'#666'}">
          <span type="primary">{{ item.name }}</span>
        </div>
      </van-tabbar-item>
    </van-tabbar>
    <!-- <van-tabbar
      class="tabbar"
      v-model="activeIndex"
      v-if="isTabUrl"
      :z-index="100"
      active-color="rgb(186,172,142)"
      inactive-color="rgb(186,172,142)"
      :style="{ background: basic.theme || cfg.theme }"
    >
      <van-tabbar-item
        v-for="(item, index) in tabbar"
        :key="index"
        @click="navClick(item.link, index)"
      >
        <template #icon>
          <span :class="'iconfont ' + item.icon"></span>
        </template>
        <div class="item">
          <span type="primary">{{ item.name }}</span>
        </div>
      </van-tabbar-item>
    </van-tabbar> -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import cfg from "@/config";
export default {
  data() {
    return {
      cfg,
      navs: [],
      linkArr: [
        "/vote",
        "/search",
        "/introduce",
        "/ranking",
        "/sign",
        "/dynamic",
      ],
    };
  },
  computed: {
    ...mapGetters("configs", {
      tabbar: "tabbar",
      basic: "basic",
    }),
    isTabUrl() {
      return this.linkArr.indexOf(this.$route.path) !== -1;
    },
    activeIndex: {
      get() {
        const index = this.tabbar.findIndex((s) => s.link === this.$route.path);
        return index;
      },
      set(val) {
        return val;
      },
    },
  },
  methods: {
    navClick(link, index) {
      console.log(link, index);
      this.activeIndex = index;
      if (link === "/search") {
        this.$store.commit("status/SET_SHOWSEARCH", true);
      } else {
        this.$router.push(this.tabbar[index].link);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/commons/css/mixin.scss";

.tabbar {
  @include border-1px(rgba(0, 0, 0, 0.1), top, 0, solid);
  ::v-deep .van-tabbar-item {
    .van-tabbar-item__icon {
      margin-bottom: 3px;
      .icon {
        height: 27px;
        width: 27px;
      }
    }
    .van-tabbar-item__text {
      font-size: 10px;
      letter-spacing: 0.15px;
      line-height: 14px;
      color: rgb(186,172,142);
    }
  }
}
::v-deep.van-tabbar {
  .van-tabbar-item--active {
    background-color: transparent;
  }
}
</style>